<template>
	<div>
		<navigationBar :bgType="4" navigationTitle="服务师端" />
		<!-- <navigationBar :bgType="4" :backType="2" navigationTitle="服务师端" /> -->

        <view
            class="wrap paddingBottom"
            :style="{ '--navigation-height': navigationHeight + 'px' }"
            v-if="dataInfo"
        >
            <image
                class="wrap-bg"
                :src="getImageURL('technician/technician/top_bg.png')"
                mode="widthFix"
            />

            <view class="wrap-info flex align-center just-between">
                <image class="avatar" :src="dataInfo.work_image" />

                <view class="info">
                    <view class="nickname flex align-center">
                        <text class="f-32 limit-num-line">
                            {{ dataInfo.name }}
                        </text>
                        <image
                            :src="
                                getImageURL(
                                    'technician/technician/arrow_white.png'
                                )
                            "
                        />
                    </view>

                    <scroll-view class="authen-bg flex" scroll-x>
                        <view class="authen-item f-26" @click="onAuthen">
                            {{
                                dataInfo.authentication == 0
                                    ? "未认证"
                                    : dataInfo.authentication == 1
                                    ? "已认证"
                                    : "认证中"
                            }}
                        </view>
                        <view class="authen-item f-26" v-if="false">
                            {{ dataInfo.level_name }}
                        </view>
                        <view class="authen-item f-26">
                            {{ dataInfo.is_service == 1 ? "服务中" : "已休息" }}
                        </view>
                    </scroll-view>
                </view>

                <view class="right flex column align-end">
                    <view class="switch-img">
                        <image
                            v-if="dataInfo.is_update == 1"
                            :src="
                                getImageURL(
                                    'technician/technician/address_update_on.png'
                                )
                            "
                        />
                        <image
                            v-else
                            :src="
                                getImageURL(
                                    'technician/technician/address_update_off.png'
                                )
                            "
                        />
                    </view>

                    <view class="name f-20">
                        {{
                            dataInfo.is_update == 1 ? "已开启" : "已关闭"
                        }}自动更新
                    </view>
                </view>
            </view>

            <view class="address-bg flex align-center">
                <image
                    class="img"
                    :src="
                        getImageURL(
                            'technician/technician/address_location.png'
                        )
                    "
                />
                <view class="current f-26"> 当前位置: </view>
                <view class="address f-26 limit-num-line">{{
                    dataInfo.address
                }}</view>
            </view>

            <view class="options-bg flex">
                <block v-for="(item, index) in options_list" :key="index">
                    <view class="options-item">
                        <view class="flex column align-center just-center">
                            <image class="img" :src="getImageURL(item.file)" />
                            <view class="name f-26">{{ item.title }}</view>
                        </view>
                    </view>
                </block>
            </view>

            <view class="income-bg flex align-center just-between">
                <view
                    class="income-item flex column just-center"
                    @click.stop="onService"
                >
                    <view class="name f-28"> 服务收入 </view>
                    <view class="num">
                        <text class="f-24 symbol">¥</text>
                        <text class="fb-34">{{
                            dataInfo.service_prcie || "0"
                        }}</text>
                    </view>
                    <view class="withdraw-bg f-26" @click.stop="onCash">
                        去提现
                    </view>
                </view>

                <view class="income-item flex column just-center">
                    <view class="name f-28"> 车费结算 </view>
                    <view class="num">
                        <text class="f-24 symbol">¥</text>
                        <text class="fb-34">{{
                            dataInfo.car_price || "0"
                        }}</text>
                    </view>
                    <view class="withdraw-bg f-26"> 去提现 </view>
                </view>
            </view>

            <view class="wrap-order-bg">
                <view class="order-title fb-28"> 我的订单 </view>

                <view class="order-list flex align-center">
                    <block v-for="(item, index) in order_list" :key="index">
                        <view
                            class="order-item"
                            @click="onOrderList(item, index)"
                        >
                            <view class="flex column align-center just-center">
                                <view class="file">
                                    <image
                                        class="img"
                                        :src="getImageURL(item.file)"
                                    />

                                    <view class="num f-14" v-if="item.num > 0">
                                        {{ item.num }}
                                    </view>
                                </view>
                                <view class="title f-24">
                                    {{ item.title }}
                                </view>
                            </view>
                        </view>
                    </block>
                </view>
            </view>

            <view class="wrap-tool">
                <view class="tool-title fb-28"> 我的工具 </view>

                <view class="tool-list flex">
                    <block v-for="(item, index) in tool_list" :key="index">
                        <view
                            class="tool-item flex column align-center just-center"
                            @click="$handle(item)"
                        >
                            <image class="img" :src="getImageURL(item.file)" />
                            <view class="title f-24"> {{ item.title }} </view>
                        </view>
                    </block>
                </view>
            </view>
        </view>
        <view class="mask" v-if="showModal"></view>
        <view class="model" v-if="showModal">
            <view class="model-title"> 技师未认证 </view>
            <view class="model-content">
                当前您的技师属于未认证状态，认证过后才可进行正常接单，请前往认证！
            </view>
            <view class="model-btns flex align-center">
                <view class="model-btnN f-28" @click="onCancel">暂不</view>
                <view class="model-btnY f-28" @click="onAuth">去认证</view>
            </view>
        </view>
    </div>
</template>

<script>
import { getTechnicianInfo } from "@/API/technician.js";
export default {
    props: {
        userStatus: {
            type: Number,
            default: 0,
        },
    },
    data() {
        return {
            navigationHeight: this.$navigationHeight,

            dataInfo: null,

            showModal: false,

            options_list: [
                {
                    title: "位置更新",
                    file: "technician/technician/address_update.png",
                    handle: () => {},
                },
                {
                    title: "时间管理",
                    file: "technician/technician/time_manager.png",
                    handle: () => {},
                },
                {
                    title: "一键报警",
                    file: "technician/technician/click_alarm.png",
                    handle: () => {},
                },
            ],
            order_list: [
                {
                    title: "待接单",
                    file: "technician/technician/wait_take.png",
                    num: 0,
                    status: 2,
                },
                {
                    title: "待服务",
                    file: "technician/technician/wait_service.png",
                    num: 0,
                    status: 3,
                },
                {
                    title: "服务中",
                    file: "technician/technician/serving.png",
                    num: 0,
                    status: 4,
                },
                {
                    title: "已完成",
                    file: "technician/technician/order_finish.png",
                    num: 0,
                    status: 7,
                },
                // {
                //     title: "取消/拒单",
                //     file: "technician/technician/order_cancel.png",
                //     num: 0,
                // },
            ],
            tool_list: [
                {
                    title: "等级管理",
                    file: "technician/technician/level_manager.png",
                    handle: () => {},
                },
                {
                    title: "储值返佣",
                    file: "technician/technician/czfy.png",
                    handle: () => {},
                },
                {
                    title: "分成明细",
                    file: "technician/technician/fcmx.png",
                    handle: () => {
                        uni.navigateTo({
                            url: "/subPages/technician/details/breakdownOfDivision",
                        });
                    },
                },
                {
                    title: "车费明细",
                    file: "technician/technician/cfmx.png",
                    handle: () => {
                        uni.navigateTo({
                            url: "/subPages/technician/details/fareDivision",
                        });
                    },
                },
                {
                    title: "差评申诉",
                    file: "technician/technician/cpss.png",
                    handle: () => {},
                },
                {
                    title: "屏蔽用户",
                    file: "technician/technician/pbyh.png",
                    handle: () => {},
                },
                {
                    title: "提现记录",
                    file: "technician/technician/txjl.png",
                    handle: () => {},
                },
                {
                    title: "切换用户端",
                    file: "technician/technician/qhyhd.png",
                    handle: () => {
                        uni.$off("onTechnicianShow");
                        this.$stoarge.setUserStatus(1);
                        this.$emit("update:userStatus", 1);
                    },
                },
            ],
        };
    },
    mounted() {
        uni.$on("onTechnicianShow", () => {
            this.getData();
        });
        this.getData();
    },
    methods: {
        /**
         * 订单
         */
        onOrderList(item, index) {
            if (index === 4) {
            } else {
                uni.navigateTo({
                    url: `/subPages/technician/technician/orderList?status=${item.status}`,
                });
            }
        },
        /**
         * 网络请求
         */
        getData() {
            getTechnicianInfo().then((res) => {
                this.dataInfo = res.data;

                this.order_list[0].num = res.data.waiting_order;
                this.order_list[1].num = res.data.service_order;

                if (this.dataInfo.authentication == 0) {
                    return;
                    this.showModal = true;
                }
            });
        },
        // 认证
        onAuthen() {
            if (this.dataInfo.authentication == 0) {
                this.showModal = true;
            }
        },
        onAuth() {
            this.showModal = false;
            uni.navigateTo({
                url: "/subPages/technician/recruit/authentication",
            });
        },
        onCancel() {
            this.showModal = false;
            uni.$off("onTechnicianShow");
            this.$stoarge.setUserStatus(1);
            this.$emit("update:userStatus", 1);
        },
        // 服务收入
        onService() {
            uni.navigateTo({
                url: "/subPages/technician/recruit/serviceRevenue",
            });
        },
        onCash() {
            uni.navigateTo({
                url: "/subPages/technician/recruit/cash",
            });
        },
    },
};
</script>

<style lang="scss" scoped>
	.wrap {
		--bottom-height: 120rpx;
		--limit-num: 1;
		position: relative;
		z-index: 1;
		padding-left: 20rpx;
		padding-right: 20rpx;
		box-sizing: border-box;

		.wrap-info {
			margin-top: 30rpx;
			width: 100%;

			.avatar {
				width: 112rpx;
				height: 112rpx;
				border-radius: 50%;
				overflow: hidden;
			}
			.info {
				margin-left: 20rpx;
				flex: 1;
				overflow: hidden;

				.nickname {
					width: 100%;
					overflow: hidden;
					color: $bg-text-color;

					> image {
						margin-left: 12rpx;
						width: 10rpx;
						height: 16rpx;
					}
				}
				.authen-bg {
					margin-top: 25rpx;
					width: 100%;
					white-space: nowrap;

					.authen-item {
						display: inline-block;
						height: 40rpx;
						line-height: 40rpx;
						text-align: center;
						padding: 0 12rpx;
						border: 2rpx solid $bg-text-color;
						color: $bg-text-color;
						border-radius: 10rpx;
						overflow: hidden;
						margin-right: 15rpx;

						&:last-child {
							margin-right: 0rpx;
						}
					}
				}
			}
			.right {
				margin-left: 10rpx;
				height: 112rpx;
				overflow: hidden;

				.switch-img {
					width: 84rpx;
					height: 36rpx;

					> image {
						width: 100%;
						height: 100%;
					}
				}
				.name {
					margin-top: 15rpx;
					color: white;
				}
			}
		}

		.address-bg {
			margin-top: 28rpx;
			width: 100%;
			height: 80rpx;
			background-color: rgba(255, 255, 255, 0.41);
			border-radius: 10rpx;
			overflow: hidden;
			padding: 0 20rpx;
			box-sizing: border-box;

			.img {
				width: 24rpx;
				height: 24rpx;
			}
			.current {
				margin-left: 6rpx;
				color: white;
			}
			.address {
				margin-left: 10rpx;
				flex: 1;
				overflow: hidden;
				color: white;
			}
		}

		.options-bg {
			margin-top: 30rpx;
			width: 100%;
			overflow: hidden;
			white-space: nowrap;
			.options-item {
				flex: 1;
				overflow: hidden;

				> view {
					width: 100%;
					height: 100%;

					.img {
						width: 52rpx;
						height: 52rpx;
					}
					.name {
						margin-top: 15rpx;
						color: $bg-text-color;
					}
				}
			}
		}

		.income-bg {
			margin-top: 30rpx;
			width: 100%;
			overflow: hidden;
			flex-wrap: wrap;

			.income-item {
				width: 340rpx;
				height: 132rpx;
				border-radius: 10rpx;
				background-color: white;
				overflow: hidden;
				padding: 0 18rpx;
				box-sizing: border-box;
				position: relative;

				.name {
					color: #666666;
				}
				.num {
					margin-top: 20rpx;
					color: $theme-color;

					.symbol {
						margin-right: 5rpx;
					}
				}
			}
		}

		.withdraw-bg {
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
			width: 120rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			background-color: $theme-color;
			color: $bg-text-color;
			border-top-left-radius: 10rpx;
			border-bottom-left-radius: 10rpx;
			overflow: hidden;
		}

		.wrap-order-bg {
			margin-top: 20rpx;
			width: 100%;
			background-color: white;
			border-radius: 20rpx;
			overflow: hidden;
			padding: 30rpx 20rpx;
			box-sizing: border-box;

			.order-title {
				color: $title-color;
			}

			.order-list {
				margin-top: 10rpx;
				width: 100%;
				overflow: hidden;
				white-space: nowrap;

				.order-item {
					padding-top: 20rpx;
					flex: 1;
					display: inline-block;
					overflow: hidden;

					> view {
						width: 100%;
						height: 100%;

						.file {
							width: 52rpx;
							height: 52rpx;
							position: relative;

							.img {
								width: 52rpx;
								height: 52rpx;
							}

							.num {
								position: absolute;
								right: 0rpx;
								top: -8rpx;
								height: 22rpx;
								line-height: 22rpx;
								text-align: center;
								padding: 0 6rpx;
								color: white;
								border-radius: 11rpx;
								overflow: hidden;
								background-color: #f91600;
							}
						}
						.title {
							margin-top: 14rpx;
							color: $title-color;
						}
					}
				}
			}
		}

		.wrap-tool {
			margin-top: 20rpx;
			width: 100%;
			background-color: white;
			border-radius: 20rpx;
			overflow: hidden;
			padding: 30rpx 20rpx 0rpx;
			box-sizing: border-box;

			.tool-title {
				color: $title-color;
			}

			.tool-list {
				margin-top: 40rpx;
				width: 100%;
				overflow: hidden;
				flex-wrap: wrap;

				.tool-item {
					width: 25%;
					overflow: hidden;
					margin-bottom: 30rpx;

					.img {
						width: 64rpx;
						height: 64rpx;
					}

					.title {
						margin-top: 15rpx;
						color: $title-color;
					}
				}
			}
		}
	}
	.model {
		width: 90%;
		background: white;
		margin: 0 auto;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 999;
		text-align: center;
		padding: 0 50rpx;
		border-radius: 20rpx;
		box-sizing: border-box;
		&-title {
			font-size: 36rpx;
			color: #333333;
			font-weight: bold;
			padding: 45rpx 0 0 0;
		}
		&-content {
			font-size: 30rpx;
			color: #333333;
			padding: 30rpx 20rpx;
			line-height: 1.4;
			text-align: left;
		}
		&-btns {
			justify-content: space-around;
			padding: 10rpx 0 40rpx 0;
		}
		&-btnN {
			color: #666666;
			background: #ececec;
		}
		&-btnY {
			color: white;
			background: linear-gradient(90deg, #5d64ca 0%, #6f9bdf 100%);
		}
		&-btnN,
		&-btnY {
			width: 200rpx;
			height: 68rpx;
			line-height: 68rpx;
			border-radius: 38rpx;
		}
	}
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		z-index: 998;
	}
</style>
